html {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
body {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
#main {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: scroll;
}
.label-btn-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: white;
  width: 100%;
}
.label-btn-group .label-btn {
  position: relative;
  width: 50%;
  text-align: center;
  padding: .5rem 0;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-bottom: 1px solid white;
}
.label-btn-group .label-btn.active {
  color: orangered;
  border-color: orangered;
}
#content {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow-y: scroll;
}
#content > div::-webkit-scrollbar,
#content::-webkit-scrollbar {
  display: none;
}
#content > div {
  padding: .5rem;
}
.coupon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: .5rem 0;
  position: relative;
  background: white;
  box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 0.2);
}
.coupon::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 16px;
  width: 16px;
  background: #efeff4;
  border-radius: 50% 0 0 50%;
}
.coupon .left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 .5rem 0 1rem;
  background: white;
  position: relative;
}
.coupon .left::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 16px;
  width: 16px;
  background: #efeff4;
  border-radius: 0 50% 50% 0;
}
.coupon .right {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 14px;
  padding: 0 .5rem;
  position: relative;
  background: white;
}
.coupon .right::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  border-left: 1px dashed #a2a2a8;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.coupon .right .des {
  font-size: 12px;
  color: #6d6d72;
}
.coupon .right .date {
  font-size: 12px;
}
.used .icon-container {
  background: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.used .icon {
  font-size: 3rem;
  margin-right: 1rem;
  color: #c4c4ca;
}
.highlight.des {
  font-size: 14px;
}
